<script lang="ts" setup>
//接收父组件传递的数据
import {defineProps, ref} from 'vue'
const props = defineProps({
  switchList: Array,
  activeItem: String,
  updataChangeActiveItem: Function
})
const switchList = ref(props.switchList)
const activeItem = ref(props.activeItem)

// updataChangeActiveItem

const changeActiveItem = (item: string) => {
  activeItem.value = item
  props.updataChangeActiveItem(item);

}
</script>

<template>
<div class="switch">
  <div @click="changeActiveItem(item)" v-for="(item,i) in switchList" :key="i" :class="activeItem==item?'active':''">
    {{item}}
  </div>
</div>
</template>

<style scoped lang="scss">
.switch{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  background-repeat: no-repeat;
  background-image: url("@/assets/images/btn-bg.png");
  background-size:100% 100%;
  z-index: 1;
  //transform: rotateZ(12deg);
  border-radius: 5px 0;


  div{
    //width: 50px;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #7FCFF4;
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    &:last-child{
      &:before{
        display: none;
      }
    }
    &::before{
      content: '';
      display: inline-block;
      width: 2px;
      height: 60%;
      position: absolute;
      right: 0;
      transition: all 0.3s;
    }
  }
.active{
  color: #fff;
  &:after{
    content: '';
    display: block;
    width: 30%;
    height: 2px;
    position: absolute;
    bottom: 4px;
  }
}
}
.switch-panel{
  position: absolute;
  right: 20px;
  top: -40px;
}
</style>
